<template>
  <div class="row gx-2 gx-lg-3">
    <div><h3>农机行情</h3></div>
    <div class="table-responsive">
      <table class="table table-striped table-sm">
        <thead>
          <tr>
            <th scope="col">#</th>
            <th scope="col">产品名称</th>
            <th scope="col">品类</th>
            <th scope="col">价格</th>
            <th scope="col">公司</th>
            <th scope="col">网页链接</th>
            <th scope="col">更新日期</th>
          </tr>
        </thead>
        <tbody>
          <tr v-for="index in range(start, end)" :key="index">
            <td>{{ index + 1 }}</td>
            <td>{{ goodsName[index] }}</td>
            <td>{{ category3[index] }}</td>
            <td>{{ price[index] }}</td>
            <td>{{ company[index] }}</td>
            <td>{{ url[index] }}</td>
            <td>{{ date[index] }}</td>
          </tr>
        </tbody>
      </table>
      <div class="row">
        <div class="col-lg-5"></div>
        <div class="col-lg-1">
          <h5>
            <button class="badge bg-secondary" v-on:click="pageReduce()">
              上一页
            </button>
          </h5>
        </div>
        <div class="col-lg-1">
          <h5>
            <button class="badge bg-secondary" v-on:click="pageAdd()">
              下一页
            </button>
          </h5>
        </div>
        <div class="col-lg-5"></div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      data: "",
      goodsName: [],
      category3: [],
      price: [],
      company: [],
      location: [],
      url: [],
      date: [],
      start: 0,
      end: 0,
      begin: 0,
      part: 0,
    };
  },
  mounted() {
    this.axios
      .get(
        "http://122.51.157.58:8081/api-service/getNjwInfo?key=123456"
      )
      .then((body) => {
        this.data = body.data.data.result;
        for (var i = 0; i < this.data.length; i++) {
          this.goodsName.push(this.data[i].goodsName);
          this.category3.push(this.data[i].category3);
          this.price.push(this.data[i].price);
          this.company.push(this.data[i].company);
          this.url.push(this.data[i].url);
          this.date.push(this.data[i].date);
        }
        this.part = Math.floor(this.data.length / 10);
        if (this.part == 0) {
          this.end = this.data.length;
        } else {
          this.end = 10;
        }
      });
  },
  methods: {
    range(start, end) {
      var arr = [];
      for (var i = start; i < end; i++) {
        arr.push(i);
      }
      return arr;
    },
    pageAdd() {
      var gap = this.data.length - this.end;
      if (gap >= 10) {
        this.start += 10;
        this.end += 10;
      } else if (this.end != this.data.length) {
        this.start += 10;
        this.end = this.data.length;
      }
    },
    pageReduce() {
      if (this.end == this.data.length) {
        this.start -= 10;
        this.end = this.part * 10;
      } else if (this.start != 0) {
        this.start -= 10;
        this.end -= 10;
      }
    },
  },
};
</script>